<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>

<head>
    <title>Test Page - Radial Menu</title>

	<!--<link type="text/css" href="http://yui-ext-mvc.googlecode.com/svn/trunk/assets/css/radialMenu.css" rel="stylesheet"/>-->
	<link type="text/css" href="/assets/css/radialMenu.css" rel="stylesheet"/>
	
	<style type="text/css">
		.yui-radialmenu div.radialMenuPanel-hover {
			/*background-color: white !important;*/
		}

		.yui-radialmenu {
			background-color: #333;
			opacity: .70;
		}
    </style>
</head>

<body id="project">

	<h1>Test Page - Radial Menu</h1>

	<p class="copy">
		This page is demonstrates the Y3 radio menu widget, inspired by BioWare's menu in the game DragonAge.
	</p>

	<p>There is one known bug, where if you click the Show Menu button before the Overlay logic has completed building the DOM, then the panels may open and then immediately hide.</p>

	<p class="copy update">
		I have added a plugin to allow animating the opening and closing of the widget. Unfortunately, the rotation animation has a tendency to hang;
		probably because the movement along a curve animation requires a lot of browser rendering computation.
	</p>

	<div class="buttons">
		<label for="textPanelCount"> Number of Panels: </label>
		<input id="textPanelCount" type="text"/>
		<label for="textPanelDiameter"> Menu Diameter: </label>
		<input id="textPanelDiameter" type="text"/>
		<label for="selectPanelAnimation"> Animation Type: </label>
		<select id="selectPanelAnimation">
			<option value="">None</option>
			<option value="rotate">Rotate</option>
			<option value="radiate">Radiate</option>
		</select>
		<input id="btnRadialMenu" type="button" value=" Show Menu "/>
	</div>

	<div id="messages"></div>

    <script type="text/javascript" src="http://yui.yahooapis.com/3.0.0/build/yui/yui.js"></script> 
    <!--<script type="text/javascript" src="http://yui.yahooapis.com/3.1.0pr1/build/yui/yui.js"></script>-->
    <!--<script type="text/javascript" src="/assets/js/yahoo-3/yui/yui.js"></script>-->
	<script type="text/javascript">YUI({
//		base: '/assets/js/yahoo-3/',
		combine: true,
		filter:'raw',
		loadOptional: true,
		modules: {

			'gallery-radialmenu': {
				fullpath: 'http://core.localhost/assets/js/yahoo-3-ext/gallery-radialmenu.js?r=5',
//				fullpath: 'http://github.com/mattsnider/yui3-gallery/raw/master/build/gallery-radialmenu/gallery-radialmenu-min.js',
				requires: ['overlay', 'collection', 'event-mouseenter', 'node'],
				optional: ['plugin', 'anim'],
				supersedes: []
			},
/*
			'gallery-radial-menu': {
				fullpath: 'http://yui-ext-mvc.googlecode.com/svn/trunk/assets/js/yahoo-3-ext/RadialMenu.js',
//				fullpath: 'http://core.localhost/assets/js/yahoo-3-ext/RadialMenu.js?r=5',
				requires: ['overlay', 'collection', 'gallery-radial-menu-panel'],
				optional: ['gallery-radial-menu-anim'],
				supersedes: []
			},
			'gallery-radial-menu-panel': {
				fullpath: 'http://yui-ext-mvc.googlecode.com/svn/trunk/assets/js/yahoo-3-ext/RadialMenuPanel.js',
//				fullpath: 'http://core.localhost/assets/js/yahoo-3-ext/RadialMenuPanel.js',
				requires: ['overlay', 'event-mouseenter'],
				optional: [],
				supersedes: []
			},
			'gallery-radial-menu-anim': {
				fullpath: 'http://yui-ext-mvc.googlecode.com/svn/trunk/assets/js/yahoo-3-ext/RadialMenuAnim.js',
//				fullpath: 'http://core.localhost/assets/js/yahoo-3-ext/RadialMenuAnim.js',
				requires: ['plugin', 'anim', 'gallery-radial-menu'],
				optional: [],
				supersedes: []
			},
*/
			'gallery-node-field': {
				fullpath: 'http://yui-ext-mvc.googlecode.com/svn/trunk/assets/js/yahoo-3-ext/NodeField.js',
//				fullpath: '/assets/js/yahoo-3-ext/NodeField.js',
				requires: ['node'],
				optional: [],
				supersedes: []
			}
		}
	}).use('node', 'gallery-radialmenu', /*'gallery-radial-menu', 'gallery-radial-menu-panel', 'gallery-radial-menu-anim',*/ 'gallery-node-field', function(Y) {
		var radialMenu = new Y.RadialMenu({diameter: 200, panels: [
				new Y.RadialMenuPanel({content: '0'}),
				new Y.RadialMenuPanel({content: '1'}),
				new Y.RadialMenuPanel({content: '2'}),
				new Y.RadialMenuPanel({content: '3'}),
				new Y.RadialMenuPanel({content: '4'}),
				new Y.RadialMenuPanel({content: '5'})
			], useMask: true});

		var random = function(m, n) {
            var offset = 0;

            // compute min/max
            if (Y.Lang.isNumber(n) && n !== m) {
                var max = (n < m) ? m : n,
                    min = n === max ? m : n;

                offset = min;
                m = max - min;
            }

            return offset + Math.floor(Math.random() * m + 1);
        };

		var hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f'],
			getHex = function() {
				return '#' + hex[random(15)] + hex[random(15)] + hex[random(15)];
			},
			_handlePanelCount = function() {
				var value = Y.one('#textPanelCount').get('value'),
					panels = radialMenu.get('panels'),
					j, i, panel;

				if (2 > value) {value = panels.length;}
				j = parseInt(value, 10);

				for (i=panels.length-1; 0<=i; i-=1) {
					panels[i].destroy();
				}

				panels = [];
				for (i=0; i < j; i += 1) {
					panel = new Y.RadialMenuPanel({content: '' + i});
					panel.get('boundingBox').setStyle('backgroundColor', getHex());
					panels.push(panel);
				}

				radialMenu.set('panels', panels);
				radialMenu.syncUI();
				return true;
			},
			_handlePanelDiameter = function() {
				var value = Y.one('#textPanelDiameter').get('value');

				if (100 > value) {
					return false;
				}
				else {
					radialMenu.set('diameter', parseInt(value, 10));
					radialMenu.syncUI();
					return true;
				}
			},
			_handlePanelAnim = function() {
				var value = Y.NodeFieldSerializer.selectOne(Y.one('#selectPanelAnimation'))[1],
					plug = radialMenu.radialMenuAnim;

				if (value && 'None' != value) {
					plug.enable();

					if ('rotate' == value) {
						plug.set('animType', 'rotate');
						plug.set('easingIn', Y.Easing.easeIn);
						plug.set('easingOut', Y.Easing.easeOut);
					}
					else {
						plug.set('animType', 'radiate');
						plug.set('easingIn', Y.Easing.elasticIn);
						plug.set('easingOut', Y.Easing.elasticOut);
					}
				}
				else {
					plug.disable();
				}
				radialMenu.syncUI();
			};

		radialMenu.hide();
		_handlePanelCount();
		_handlePanelDiameter();
		radialMenu.plug(Y.RadialMenuAnim, {animType: 'rotate', easingOut: Y.Easing.easeOut, easingIn: Y.Easing.easeIn});
		_handlePanelAnim();
		radialMenu.render();
		radialMenu.on('panelClicked1', function() {
			alert('click on Panel 1');
		});
		radialMenu.on('panelClicked', function(e) {
			var message = new Y.Node(document.createElement('p')),
				panel = e.details[1];
			
			message.set('innerHTML', 'clicked on panel ' + panel.get('content'));
			Y.one('#messages').appendChild(message);
		});

		Y.one('#btnRadialMenu').on('click', function() {
			radialMenu.show();
		});

		Y.one('#selectPanelAnimation').on('change', _handlePanelAnim);

		Y.one('#textPanelDiameter').on('change', function(e) {
			if (_handlePanelDiameter()) {
				radialMenu.syncUI();
			}
			else {
				alert('Diameter is too small');
			}
		});

		Y.one('#textPanelCount').on('change', function(e) {
			if (_handlePanelCount()) {
				radialMenu.syncUI();
			}
			else {
				alert('There must be at least one panel');
			}
		});
	});</script>
</body>
</html>